<template>
    <div class="articleCard-wrapper" @click="intoArticle">
        <h1 class="title">{{ article.title }}</h1>

        <div 
            class="cover_imgs"
            :class="{ 
                right: article.cover_imgs.length === 1, 
            }"
            v-if="article.cover_imgs && (article.cover_imgs.length === 1 || article.cover_imgs.length === 3)"
        >
            <img 
                v-for="url, index of article.cover_imgs" 
                :key="index"
                :src="url"
            >
        </div>

        <div class="author_review_date">
            <span>{{ article.author }}</span>
            <span>{{ article.review_count }}评论</span>
            <span>{{ article.date }}</span>
        </div>

        <div class="line"></div>
    </div>
</template>

<script>
export default {
    name: 'ArticleCard',
    props: {
        article: Object,
    },
    methods: {
        intoArticle () {
            let id = this.$props.article.id
            this.$router.push(`/article/${id}`)
        }
    }
}
</script>

<style lang="less" scoped>
.articleCard-wrapper{
    padding-top: 10px;

    .title{
        font-size: 20px;
        max-height: 50px;
        overflow:hidden;
        text-overflow: ellipsis;

        //设置第二行出现省略符
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .cover_imgs{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 10px;
        margin-top: 10px;
        img{
            border-radius: 5px;
            width: 100%;
            height: 90px;
        }
    }

    .right{
        img {
            height: 180px;
            grid-column-start: 1;
            grid-column-end: 4;
        }
    }

    .author_review_date{
        color: @font-grey-99;
        font-size: 14px;
        margin: 8px auto;
        span{
            margin-right: 10px;
        }
    }

    .line{
        height: 1px;
        background-color: @background-grey-f2;
        transform: scaleY(.1);
    }
}
</style>